<template>
  <view class="event-list-page">
    <u-navbar placeholder
              leftIcon="arrow-left"
              :title="$t('pages_event_list_list_msg_2c4681f2')"
              @leftClick="goBack" />
    
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :down="downOption"
      :up="upOption"
      :height="`${systemInfo.windowHeight - systemInfo.statusBarHeight - 44}px`"
    >
      <view class="event-list">
        <view v-for="item in dataList" 
              :key="item.id" 
              class="event-item"
              @click="onEventClick(item)">
          <image :src="item.phoneLogo || item.logo" 
                 class="event-logo" 
                 mode="aspectFill" />
          <view class="event-content">
            <text class="event-title">{{ item.name }}</text>
          <view class="event-meta">
            <view class="event-location">
              <u-icon name="map" size="16" color="#999"/>
              <text class="location-text">{{ item.location || '暂无地址' }}</text>
            </view>
            <view class="event-date">
              <u-icon name="clock" size="16" color="#999"/>
              <text class="date-text">{{ formatDate(item.beginTime) }}</text>
            </view>
          </view>
          </view>
          <view class="event-status" :class="item.status === 0 ? 'status-pending' : item.status === 1 ? 'status-confirmed' : item.status === 2 ? 'status-processing' : item.status === 3 ? 'status-completed' : item.status === 4 ? 'status-cancelled' : item.status === 5 ? 'status-refunded' : 'status-unknown'">
              <text class="status-text">{{ item.status === 0 ? this.$t('pages_user_event_detail_detail_msg_047109de') : item.status === 1 ? this.$t('pages_user_event_detail_detail_msg_4113e726') : item.status === 2 ? this.$t('pages_event_list_list_msg_fb852fc6') : item.status === 3 ? this.$t('pages_event_grades_grades_msg_fad5222c') : item.status === 4 ? this.$t('pages_user_event_detail_detail_msg_2111ccbb') : item.status === 5 ? this.$t('pages_user_event_detail_detail_msg_e85018b9') : this.$t('pages_album_album_msg_903b25f6') }}</text>
            </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'

export default {
  name: 'Event-List',
  mixins: [MescrollMixin],
  computed: {
    ...mapState({
      systemInfo: (state) => state.app.systemInfo,
    }),
  },
  data() {
    return {
      dataList: [],
      downOption: {
        auto: true,
      },
      upOption: {
        auto: false,
      },
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onEventClick(item) {
      // 跳转到首页并切换赛事
      uni.switchTab({
        url: '/pages/index/index'
      })
      
      // 延迟执行，确保页面切换完成
      setTimeout(() => {
        // 通过事件总线通知首页切换赛事
        uni.$emit('switchEvent', {
          eventId: item.id,
          eventName: item.name
        })
      }, 100)
    },
    formatDate(dateStr) {
      if (!dateStr) return this.$t('pages_album_album_msg_fbec222b')
      const date = new Date(dateStr)
      if (isNaN(date.getTime())) return this.$t('pages_album_album_msg_fbec222b')
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    getStatusText(item) {
      const now = new Date().getTime()
      const beginTime = new Date(item.beginTime).getTime()
      const endTime = new Date(item.endTime).getTime()
      
      if (now < beginTime) {
        return this.$t('pages_event_list_list_msg_d0f7dcc0')
      } else if (now >= beginTime && now <= endTime) {
        return this.$t('pages_event_list_list_msg_fb852fc6')
      } else {
        return this.$t('pages_event_list_list_msg_76f0010a')
      }
    },
    getStatusClass(item) {
      const now = new Date().getTime()
      const beginTime = new Date(item.beginTime).getTime()
      const endTime = new Date(item.endTime).getTime()
      
      if (now < beginTime) {
        return 'status-open'
      } else if (now >= beginTime && now <= endTime) {
        return 'status-ongoing'
      } else {
        return 'status-closed'
      }
    },
    async upCallback(page) {
      try {
        // 获取赛事列表数据
        const resultData = await this.$api.event.list() || []
        
        console.log('赛事列表数据:', resultData);
        
        if (page.num == 1) {
          this.dataList = resultData
        } else {
          this.dataList = this.dataList.concat(resultData)
        }
        
        // 结束加载
        this.mescroll.endByPage(resultData.length, 1)
      } catch (error) {
        console.error('获取赛事列表失败:', error)
        this.mescroll.endErr()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.event-list-page {
  background: #f5f5f5;
  min-height: 100vh;
}

.event-list {
  padding: 30rpx;
}

.event-item {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
  display: flex;
  height: 160rpx;
  margin-bottom: 20rpx;
  position: relative;
  transition: all 0.3s ease;
}

.event-item:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.event-logo {
  width: 160rpx;
  height: 160rpx;
  flex-shrink: 0;
  border-radius: 20rpx 0 0 20rpx;
}

.event-content {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.event-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-bottom: 12rpx;
}

.event-meta {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.event-location,
.event-date {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.location-text,
.date-text {
  font-size: 24rpx;
  color: #999;
  flex: 1;
}

.event-status {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6rpx 20rpx;
  border-radius: 0 20rpx 0 20rpx;
  font-size: 20rpx;
  font-weight: 500;
  min-width: 80rpx;
  text-align: center;
}

.status-text {
  color: #fff;
  font-size: 20rpx;
}

.status-open {
  background: #ff8b29;
}

.status-ongoing {
  background: #60ac09;
}

.status-closed {
  background: #999;
}
</style>